<template>
  <div>
    <el-card>
      <h3>试卷名称:{{ kaoti.sjname }}</h3>
      <div id="counter">
        <span class="el-icon-timer" />
        <span>距离考试结束还有:{{ counter }}秒</span>
      </div>
      <!-- <p v-for="(i,index) of kaoti.question" :key="index">
          <span>题目:{{i.title}} </span>
          <span>({{i.score}}分)</span>
          <el-input type="textarea" v-model="i.answer"></el-input>
        </p>
        <el-button type="primary"  @click="jiao">交卷</el-button> -->

      <el-form ref="ruleForm" :model="kaoti"  label-width="100px" class="demo-ruleForm">
        <el-form-item v-for="(i,index) of kaoti.que" :key="index" label="题目:" prop="answer">
          <span>{{ i.title }} </span>
          <span>({{ i.score }}分)</span>
          <el-input v-model="i.answer" type="textarea" />
        </el-form-item>

        <el-form-item class="tij">
          <el-button type="primary" @click="jiao">交卷</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      kaoti: {},
      counter: 30,
      //  rules: {
      //   answer: [
      //     { required: true, message: '请填写答案', trigger: 'blur' },
      //   ],
      // },
      set: '',
      info:''
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.info=this.$route.query.info
    console.log(this.info)
    var res = await this.http.get('/test/test/', {
      params: { id: this.$route.query.id,
        page: 1,
        size: 3 }
    })
    console.log(res)
    if (res.data.code == 200) {
      this.kaoti = res.data.data[0]
    }
  },
  mounted() {
    this.set = setInterval(() => {
      this.counter--
      if (this.counter == 60) {
        this.$message.warning('距离考试结束还有一分钟')
      }
      if (this.counter <= 1) {
        this.$message.warning('考试时间到')
        clearInterval(this.set)
        this.$router.go(-1)
      }
    }, 1000)
  },
  methods: {
    async jiao() {
      // this.$refs.ruleForm.validate(async (valid) => {
      //   if(valid){
      var res = await this.http.post('/test/kao/', {
        name: this.info.name,
        classbj: this.info.classbj,
        phone: this.info.phone,
        question: this.kaoti.que,
        testid: this.$route.query.id,
      })
      if (res.data.code == 200) {
        clearInterval(this.set)
        this.$message.success('交卷成功')
        this.$router.go(-1)
      }
      //   }
      // })
    }
  }
}
</script>
<style scoped>
    .el-card p{
        margin-top: 15px;
        margin-bottom: 15px;
    }
    #counter{
        float: right;
        font-size: 18px;
        color: red;
    }
</style>
